<template>
    <div id="question">
        <cube-input v-model="question" placeholder="请输入问题" :maxlength="50"></cube-input>
        <cube-input :maxlength="30" v-for="(item,index) in options" :disabled="answerInputDisabled(index)" :key="index" v-model.trim="item.model" :placeholder="'答案选项'+(index+1)+'留空则无此选项'" @input="answerInput(index)">
            <template v-slot:append><cube-checkbox v-model="item.answer" :option="{label:'正确',disabled:item.model === '' ? true : false}" @input="answerChange(item,index)"></cube-checkbox></template>
        </cube-input>
    </div>
</template>

<script>
    //数据结构  array(问题、正确答案下标、答案选项1、答案选项2、答案选项3)
    export default {
        name: "question",
        data(){
          return {
              question:"",  //问题
              options:[
                  {
                      model:"",
                      answer:true
                  },
                  {
                      model:"",
                      answer:false
                  },
                  {
                      model:"",
                      answer:false
                  }
              ],
          }
        },
        computed:{
            //数据
           data_data(){
               let data = [this.question,0];
               this.options.forEach((item,index)=>{
                   if(item.answer) data[1] = index;
                   data.push(item.model);
               });
               return data;
           }
        },
        watch:{
            data_data(){
                this.$emit("change",this.data_data);
            }
        },
        model:{
            prop:'data',
            event:"change"
        },
        props:{
            data:{
                type:Array,
                default(){
                    return [];
                }
            }
        },
        created(){
            this.setData();
        },
        mounted(){
          let Input = document.querySelectorAll("#question input");
            Input.forEach((item)=>{
                item.addEventListener("blur",()=>{
                    window.scroll(0,0);
                });
            });
        },
        methods:{
            //填充设置数据
            setData(){
                if(this.data.length > 0){
                    this.options.forEach((item)=>{
                        item.answer = false;
                    });
                    this.data.forEach((item,index)=>{
                        if(index === 0){
                            this.question = item;
                        }else if(index === 1){
                            this.options[item].answer = true;
                        }else{
                            this.options[index-2].model = item;
                        }
                    });
                }
            },
            //正确答案单选实现
            answerChange(value,_index){
                this.options.forEach((item,index)=>{
                    if(_index !== index){
                        item.answer = false;
                    }else{
                        item.answer = true;
                    }
                });
            },
            //监听前两个答案选项是不是空的
            answerInputDisabled(index){
                if(index === 2 && (this.options[0].model === '' || this.options[1].model === '')){
                    this.options[2].model = '';
                    return true;
                }else{
                    return false;
                }
            },
            //答案选项改变
            answerInput(index){
                if(this.options[index].model === '' && this.options[index].answer){
                    this.options[0].answer = true;
                }
            }
        }
    }
</script>
